<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>canvas标签</title>
    <style>
        #can1 {
            background-color: rgb(204, 216, 216);
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <!-- 设置宽高使用canvas标签的属性 -->
    <canvas id="can1" width="600px" height="500px"></canvas>
</body>

<script>
    // DOM操作获取canvas标签
    var canvas = document.getElementById('can1');
    // 获取canvas的上下文（2d渲染）
    var ctx = canvas.getContext('2d');
    // 绘制长方形
    ctx.moveTo(100, 100); //将画笔移动到坐标 100 100
    ctx.lineTo(200, 100); //从画笔位置绘制直线到坐标 200 100
    ctx.lineTo(200, 200); //从当前位置绘制直线到 200 200
    ctx.lineTo(100, 200); //.从当前位置...
    ctx.closePath(); //闭合线条

    ctx.lineWidth = 6; //线宽

    ctx.strokeStyle = 'red'; //描边颜色
    ctx.stroke(); //渲染直线(描边)

    ctx.fillStyle = 'blue'; //填充颜色
    ctx.fill(); //填充
</script>

</html>